<!DOCTYPE html>
<html>
<head>
    <title>Welcome to Vue</title>
    <script src="https://unpkg.com/vue"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>

<div id="app">
    <div v-if="!image">
        <h2>Select an image</h2>
        <input type="file" @change="onFileChange">
    </div>
    <div v-else>
        <img :src="image" />
        <button @click="removeImage">Remove image</button>
        <button @click="uploadFile(image)">Upload image</button>
    </div>
</div>

<script>
    // Source:
    // https://codepen.io/Atinux/pen/qOvawK/
    //
    var app = new Vue({
      el: '#app',
      data: {
        image: ''
      },
      methods: {
        onFileChange(e) {
          var files = e.target.files || e.dataTransfer.files;
          var vm = this;
          if (!files.length)
            return;
          this.createImage(files[0]);
        },
        createImage(file) {
          var image = new Image();
          var reader = new FileReader();
          var vm = this;

          reader.onload = (e) => {
            vm.image = e.target.result;
          };
          reader.readAsDataURL(file);
        },
        removeImage: function (e) {
          this.image = '';
        },
        uploadFile(file) {
          return axios.put('/services/upload',
            'SOMEBODY',
            { headers: { "Content-Type": "text/plain" }}
          );
        }
      }
    })
  </script>
</body>
</html>
